<template>
    <div ref="chartRef" style="width: 100%; height: 400px" />
</template>

<script lang="ts" setup>
import { onMounted, ref, toRefs, watch } from 'vue'
import * as echarts from 'echarts'
import charts1 from '@/assets/xj/charts1.png'

const chartRef = ref()
let chart: any
const months = Array.from({ length: 12 }, (_, i) => `${i + 1}月`);
const props = defineProps({
    monthlyCounts: Array,
});
const { monthlyCounts } = toRefs(props);

// 获取当前年份和月份标签
const currentYear = new Date().getFullYear();

watch(
    monthlyCounts,
    (newVal) => {
        if (chart && newVal && newVal.length) {
            renderCylinderChart(months, newVal)
        }
    },
    { immediate: true, deep: true }
)

const renderCylinderChart = (months: any[], monthlyCounts: any[]) => {
    const barWidth = 12
    const symbolSize = [barWidth, 6]

    // 椭圆路径（模拟 cylinder 圆顶）
    const ellipsePath = 'path://M0,8 A8,8 0 1,0 16,8 A8,8 0 1,0 0,8 Z'

    const option = {
        title: {
            text: `${currentYear}年巡检数据统计`,
            left: '5%',
            x: "center",
            y: "0%",
            textStyle: {
                color: '#fff',
                fontSize: '20'
            },
            subtextStyle: {
                color: '#90979c',
                fontSize: '16',
            },
        },
        grid: {
            left: 50,
            right: 50,
            top: 70,
            bottom: 100,
        },
        tooltip: {
            trigger: 'axis',
        },
        xAxis: {
            type: 'category',
            data: months,
            axisTick: { show: false },
            axisLine: { show: true },
            axisLabel: { color: '#333', fontSize: 12 },
        },
        yAxis: {
            name: '单位：条',
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: {
                show: true,
                lineStyle: { color: '#eee', type: 'dashed' },
            },
            axisLabel: { color: '#666' },
        },
        series: [
            {
                type: 'pictorialBar',
                symbol: `image://${charts1}`,
                symbolSize: [23, 11],
                symbolOffset: [0, '50%'],
                z: 1,
                data: monthlyCounts.map(() => 0),
            },
            // 主体圆柱体
            {
                name: '值',
                type: 'bar',
                barWidth,
                data: monthlyCounts,
                z: 3,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        { offset: 0, color: '#38e8ee' },
                        { offset: 0.5, color: '#22bedd' },
                        { offset: 1, color: '#0a89c2' },
                    ]),
                    borderRadius: [1, 1, 0, 0], // 上圆角
                },
            },
            // 顶部圆帽（模拟圆柱顶）
            {
                type: 'pictorialBar',
                symbol: ellipsePath,
                symbolSize,
                symbolPosition: 'end',
                symbolOffset: ['0', '-30%'],
                z: 4,
                data: monthlyCounts,
                itemStyle: {
                    color: '#1ad0db',
                    opacity: 1,
                },
            },
            // 底部圆椭圆（模拟圆柱底）
            {
                type: 'pictorialBar',
                symbol: ellipsePath,
                symbolSize,
                symbolOffset: [0, '50%'],
                z: 1,
                data: monthlyCounts.map(() => 0),
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        { offset: 0, color: '#38e8ee' },
                        { offset: 0.5, color: '#22bedd' },
                        { offset: 1, color: '#0a89c2' },
                    ]),
                    opacity: 1,
                },
            },
        ],
    }

    chart.setOption(option)
}

onMounted(() => {
    chart = echarts.init(chartRef.value)
    if (monthlyCounts.value && monthlyCounts.value.length) {
        renderCylinderChart(months, monthlyCounts.value)
    }
})
</script>
